{template '../web_common/header'}

<!-- 中间内容 -->
<div class="mainContent clearfix">
    <div class="center-con clearfix">
        <h2 class="main-ttl">工单管理</h2>
        <div class="main-ctn clearfix">
            <div class="col-sm-12 pad0">
                {template '../web_common/zTree'}

                <div class="col-sm-9 pad0">
                    <div class="item clearfix">
                        <input type="text" class="input-text" name="search_name" placeholder="请输入单号/客户名">
                        <button type="button" class="Btn ml10" id="search">搜索</button>
                    </div>
                    <div class="item clearfix">
                        <span>创建时间</span>
                        <input type="text" class="Wdate input-text" name="begin_time" id="d4321" onclick="WdatePicker({errDealMode:1,maxDate:'#F{$dp.$D(\'d4322\')||\'2020-10-01\'}'})"/>
                        &nbsp;<span>至</span>&nbsp;
                        <input type="text" class="Wdate input-text" name="end_time" id="d4322" onclick="WdatePicker({minDate:'#F{$dp.$D(\'d4321\')}',maxDate:'2037-12-31'})"/>
                        <button type="button" class="Btn ml10" id="sx">筛选</button>
                        <button type="button" class="Btn ml10" id="clear">清除</button>

                        <button class="Btn ml10" id="exportOrder" onclick="exportOrder()">导出工单</button>
                    </div>
                    <div class="gdgl-tab clearfix">
                        <ul class="clearfix">
                            <li class="active" data-id="0">待处理</li>
                            <li data-id="2">已处理</li>
                            <li data-id="1">已解决</li>
                        </ul>
                    </div>
                    <table id="cusTable"></table>

                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    require(['jquery', 'ztree.all', 'layer', 'lightbox', 'bootstrap-table', 'bootstrap-table-zh-CN', 'common', 'datepicker'], function ($, zTree, layer) {
        initTable();

        //跳转分页
        $('body').on('click', '.gotoPage', function () {
            $('#cusTable').bootstrapTable('selectPage', +$('#gotopage-num').val());
        });

        $('#search').on('click', function () {
            var search_name = $('input[name="search_name"]').val();
            if (search_name.length === 0) {
                layer.msg('请输入单号/客户名', {time: 1000});
                return false;
            }
            initTable();
        });
        $('input[name="search_name"]').on('keydown', function (e) {
            if (e.keyCode === 13) {
                var search_name = $(this).val();
                if (search_name.length === 0) {
                    layer.msg('请输入单号/客户名', {time: 1000});
                    return false;
                }
                initTable();
            }
        });
        $('#sx').on('click', function () {
            var begin_time = $('input[name="begin_time"]').val();
            var end_time = $('input[name="end_time"]').val();
            if (begin_time.length === 0 || end_time.length === 0) {
                var t_time = '';
                if (begin_time.length === 0 && end_time.length !== 0) {
                    t_time = '开始';
                } else if (begin_time.length !== 0 && end_time.length === 0) {
                    t_time = '结束';
                }
                layer.msg('请选择'+t_time+'时间', {time: 1000});
                return false;
            }
            initTable();
        });

        var setting = getSetting(zTree);
        initzTreeData(zTree, setting);

        //tab切换
        $('.gdgl-tab ul li').on('click',function(){
            $(this).addClass('active').siblings().removeClass('active');
            initTable();
        });
        //显示隐藏tr详情
        $('body').on('click','.checkDes',function(){
            $(this).parents('tr').next('.td_details').slideToggle()
        });
        //清除按钮
        $('#clear').on('click',function(){
            $('.Wdate').val('');
            initTable();
        });

        //发送回复
        $('body').on('click', '.send_reply', function () {
            var order_id = $(this).attr('data-id'),
                content = $(this).parent().parent().siblings().find('.layui-textarea').val();
            if (content.length == 0) {
                layer.msg('请填写回复的内容', {icon: 0,time: 1000});
                return false;
            }
            $.post("{php echo $this->createWebUrl('orders', array('act' => 'reply'))}", {order_id: order_id, content: content}, function (data) {
                layer.closeAll();
                layer.msg(data.msg, {time: 1500});
                if (data.code == 200) {
                    setTimeout(function () {
                        initTable();
                    }, 1000);
                } else {
                    return false;
                }
            });
        });
    });

    function initTable() {
        //先销毁表格
        $('#cusTable').bootstrapTable('destroy');
        //初始化表格,动态从服务器加载数据
        $("#cusTable").bootstrapTable({
            method: "get",  //使用get请求到服务器获取数据
            url: "{php echo $this->createWebUrl('orders',array('act' => 'index'))}", //获取数据的Servlet地址
            striped: true,  //表格显示条纹
            height: 600,

            pagination: true, //启动分页
            paginationLoop: false,//禁用无限循环的功能
            pageSize: 10,  //每页显示的记录数
            pageNumber: 1, //当前第几页
            pageList: [5, 10, 25, 50],  //记录数可选列表

            sortable: true,
            sortOrder: 'desc',
            sortName: '',
            clickToSelect: true,
            search: false,  //是否启用查询
            toolbar:"#toolbar",
            showColumns: false,  //显示下拉框勾选要显示的列
            showRefresh: false,  //显示刷新按钮
            sidePagination: "server", //表示服务端请求
            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //设置为limit可以获取limit, offset, search, sort, order

            queryParamsType : "limit",
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    limit: params.limit,
                    offset: params.offset,
                    sortOrder: params.order,
                    sortName: params.sort,

                    order_status: $('.gdgl-tab ul').find('li.active').attr('data-id'),

                    cat_id: "{$_GPC['cat_id']}",
                    search_name: $('input[name="search_name"]').val(),
                    begin_time: $('input[name="begin_time"]').val(),
                    end_time: $('input[name="end_time"]').val()
                };
                return param;
            },
            columns: [
                {field: "order_sn",title: "单号",align: 'center',valign: 'middle',width:'7%'},
                {field: "nickname",title: "客户名称",visible: true,align: 'center',valign: 'middle', formatter: function (value, row, index) {
                    var html = '<img src="' + row.avatar + '" style="border-radius:50px;width: 50px;height: 50px;">' + '&nbsp;&nbsp;' + value;
                    return html;
                }},
                {field: "content",title: "工单详情",align: 'center',valign: 'middle',formatter: function (value, row) {
                    return subString(value, 30);
                }},
                {field: "reply_num",title: "回复次数",align: 'center',valign: 'middle', width: '5%'},
                {field: "add_time",title: "创建时间",align: 'center',valign: 'middle',width: '13%',sortable:true},
                {field: "update_time",title: "最近回复日期",visible: true,align: 'center',valign: 'middle',width:'13%',sortable:true},
                {field: "customer_status_name",title: "客户状态",visible: true,align: 'center',valign: 'middle',width:'9%' },
                {field: "order_id",title: '操作',align: 'center',valign: 'middle',width: '10%',formatter:function(value, row, index){
                    var content = '';
                    if (row.order_status == 0) {
                        content += '<a class="text-primary" href="javascript:;" onclick="showOrder('+value+', 0)" data-toggle="tooltip" title="编辑" data-original-title="编辑">编辑</a>';
                    } else {
                        content += '<a class="text-primary" href="javascript:;" onclick="showOrder('+value+', 1)" data-toggle="tooltip" title="查看详情" data-original-title="查看详情">查看详情</a>';
                    }
                    content += '&nbsp;&nbsp;' + '<a class="text-primary" href="javascript:;" onclick="del_order('+value+')"  data-toggle="tooltip" data-placement="bottom" title="删除" data-original-title="删除">删除</a>' + '&nbsp;&nbsp;';

                    return content;
                }}
            ],
            onLoadSuccess: function(){},//加载成功时执行
            onLoadError: function(){},//加载失败时执行
            onClickRow: function (row, element) {}
        });
    }

    //待处理/已解决
    function showOrder(order_id, order_status) {
        $.post("{php echo $this->createWebUrl('orders', array('act' => 'getEditWorkOrder'))}", {order_id: order_id}, function (data) {
            if (data.code == 200) {
                var html = '';
                html += '<div class="checkDestails">';
                html += '<div class="pending">';
                html += '<div class="gdInfo">';
                html += '<span class="gdType">工单分类：' + data.info.cat_name + (data.info.child_cat_name.length == 0 ? '' : '-' + data.info.child_cat_name) + '</span>';
                html += '<span class="curStatus">客户状态：' + data.info.customer_status_name + '</span>';
                html += '</div>';
                //最新记录
                if (order_status == 0) {
                    html += '<div class="chartContent">';
                    html += '<label class="layui-form-label" style="padding-left: 0; text-align: left;">最新记录</label>';
                    html += '<div class="ueseInfo"><img src="' + data.info.avatar + '" class="layui-nav-img"><span>' + data.info.nickname + '</span></div>';
                    html += '<p class="thatMsg">' + data.info.new_content + '</p>';
                    html += '<div class="status">';
                    if (data.info.new_pic != null) {
                        $.each(data.info.new_pic, function (ni, np) {
                            html += '<a href="'+np+'" data-lightbox="roadtrip_new"><img src="'+np+'" style="width: 50px;height: 50px; margin-right: 5px"></a>';
                        });
                    }
                    html += '<div class="time" style="margin-top: 5px;color: #999;">' + data.info.new_add_time + '</div>';
                    html += '</div>';
                    html += '</div>';
                }
                if (order_status == 0 && (data.info.customer_status == 1 || data.info.customer_status == 3)) {
                    html += '<div class="layui-form-item layui-form-text">';
                    html += '<label class="layui-form-label" style="padding-left: 0;width: 35px; text-align: left; padding-right: 10px;">回复</label>';
                    html += '<div class="layui-input-block" style="margin-left: 45px">';
                    html += '<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="layui-form-item">';
                    html += '<div class="layui-input-block" style="margin-left: 45px"><button type="button" class="layui-btn send_reply" style="width: 130px;" data-id="' + data.info.order_id + '">发送</button></div>';
                    html += '</div>';
                }
                html += '</div>';

                if (data.order_list.length != 0) {
                    html += '<div style="' + (order_status == 0 ? 'border-top: 1px solid #ddd;margin-top: 10px' : '') + '"><label class="layui-form-label" style="margin-top: 20px;padding-left: 45px;">历史记录</label></div>';
                    $.each(data.order_list, function (index, item) {
                        html += '<div class="reMsg">';
                        if (item['is_reply'] == 0) {
                            html += '<div class="chartContent" style="padding-top: 0">';
                            html += '<div class="ueseInfo"><img src="' + item.avatar + '" class="layui-nav-img"><span>' + item.nickname + '</span></div>';
                            html += '<p class="thatMsg">' + item.content + '</p>';
                            html += '<div class="status">';
                            if (item['pic'] != null) {
                                $.each(item['pic'], function (i, p) {
                                    html += '<a href="'+p+'" data-lightbox="roadtrip'+item.order_id+'"><img src="'+p+'" style="width: 50px;height: 50px;margin-right: 5px"></a>';
                                });
                            }
                            html += '<div class="time" style="margin-top: 5px;color: #999;">' + item.add_time + '</div></div>';
                            html += '</div>';
                        } else {
                            html += '<div class="chartContent" style="display: flex;padding-left: 0">' +
                                '<div class="retext" style="margin-right: 20px;line-height: 30px">回复</div>' +
                                '<div>' +
                                '<div class="ueseInfo"><img src="' + item.avatar + '" class="layui-nav-img"><span>' + item.nickname + '</span></div>' +
                                '<p class="thatMsg">' + item.content + '</p>' +
                                '<div class="status"><span class="time" style="color: #999;">' + item.add_time + '</span></div>' +
                                '</div>' +
                                '</div>';
                        }
                        html += '</div>';
                    });
                }

                html += '</div>';
                layer.open({
                    type: 1,
                    area: ['700px', '500px'], //宽高
                    closeBtn: 1,
                    shadeClose: true,
                    content: html
                });
            } else {
                layer.msg(data.msg, {time: 1000});
                return false;
            }
        });
    }

    //删除工单
    function del_order(order_id) {
        if (order_id.length == 0) {
            layer.msg('订单不存在', {icon: 1, time: 1000});
            return false;
        }
        layer.confirm('您删除的内容，无法恢复，是否确认删除？', function () {
            $.post("{php echo $this->createWebUrl('orders', array('act' => 'delWordOrder'))}", {order_id:order_id}, function(data){
                layer.msg(data.msg,{icon: 1,time:1000});
                if(data.code === 200){
                    setTimeout(function () {
                        initTable();
                    }, 1000);
                }else{
                    return false;
                }
            })
        });
    }

    //导出工单
    function exportOrder() {
        var is_down_pic;

        var sortOrder = $('#cusTable').bootstrapTable('getOptions').sortOrder,
            sortName = $('#cusTable').bootstrapTable('getOptions').sortName,
            order_status = $('.gdgl-tab ul').find('li.active').attr('data-id'),
            cat_id = "{$_GPC['cat_id']}",
            search_name = $('input[name="search_name"]').val(),
            begin_time = $('input[name="begin_time"]').val(),//开始时间
            end_time = $('input[name="end_time"]').val();//结束时间

        layer.confirm('是否下载用户上传的图片？', {
            btn: ['是', '否，直接导出工单'],
            shadeClose: true
        }, function(index){
            //按钮【按钮一】的回调
            is_down_pic = 1;
            layer.close(index);
            window.location.href = "{php echo $this->createWebUrl('orders', array('act' => 'exportOrder'))}&sortOrder="+sortOrder+'&sortName='+sortName+'&order_status='+order_status+'&cat_id='+cat_id+'&search_name='+search_name+'&begin_time='+begin_time+'&end_time='+end_time+'&is_down_pic='+is_down_pic;
        }, function(index){
            //按钮【按钮二】的回调
            is_down_pic = 2;
            window.location.href = "{php echo $this->createWebUrl('orders', array('act' => 'exportOrder'))}&sortOrder="+sortOrder+'&sortName='+sortName+'&order_status='+order_status+'&cat_id='+cat_id+'&search_name='+search_name+'&begin_time='+begin_time+'&end_time='+end_time+'&is_down_pic='+is_down_pic;
        });
    }
    
</script>

{template '../web_common/footer'}